<template>
  <div class="contentContainer">
    <div ref="cesiumRef" class="cesiumBox">
      <middle-container></middle-container>
    </div>
    <div class="contentBox" ref="contentRef">
      <!-- 两边背景 -->
      <div class="leftback"></div>
      <div class="rightback"></div>
      <nav-header></nav-header>
      <!-- 两边的边框 -->
      <div class="leftborder" style="pointer-events: none"></div>
      <div class="rightborder" style="pointer-events: none"></div>
      <!-- <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component" />
        </transition>
      </router-view> -->
      <router-view></router-view>
      <nav-footer></nav-footer>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import MiddleContainer from './MiddleContainer.vue'
import NavHeader from '@/components/NavHeader.vue'
import NavFooter from '@/components/NavFooter.vue'
// import TerminalFacilities from './components/TerminalFacilities.vue'
// import VehicleTrajectory from './components/VehicleTrajectory.vue'
import { debounce } from '@/utils/index'
import { uiSize } from '@/utils/config'
const cesiumRef = ref()
const contentRef = ref()
let baserRadio = uiSize.width / uiSize.height
onMounted(() => {
  calScale()
  window.addEventListener('resize', onResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})
const calScale = () => {
  if (contentRef.value) {
    // if (uiSize.width > window.innerWidth) {
    let currentRadio = window.innerWidth / window.innerHeight
    if (currentRadio > baserRadio) {
      let h = window.innerHeight / uiSize.height
      let w = (h * currentRadio) / baserRadio
      contentRef.value.style.transform = `scale(${w},${h})`
      contentRef.value.style.transformOrigin = '0 0'
    } else {
      let w = window.innerWidth / uiSize.width
      let h = (w * baserRadio) / currentRadio
      contentRef.value.style.transform = `scale(${w},${h})`
      contentRef.value.style.transformOrigin = '0 0'
    }
  }
}
const onResize = debounce(calScale, 100)
</script>
<style lang="scss" scoped>
.contentContainer {
  width: 3840px;
  height: 1013px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .leftborder,
  .rightborder {
    top: 0;
    // left: 0;
    position: fixed;
    width: 1654px;
    height: 1011px;
    z-index: 2;
    // background-color: red;
  }
  .leftborder {
    left: 0;
    background: url('@/assets/images/global/leftborder.png') no-repeat;
    background-size: 100% 100%;
  }
  .rightborder {
    right: 0;
    background: url('@/assets/images/global/rightborder.png') no-repeat;
    background-size: 100% 100%;
  }
  .leftback,
  .rightback {
    position: fixed;
    width: 1152px;
    height: 1013px;
    top: 0;
    // left: 0;
    z-index: 1;
  }
  .leftback {
    left: 0;
    background: url('@/assets/images/global/leftPanel.png') no-repeat;
    background-size: 100% 100%;
  }
  .rightback {
    right: 0;
    background: url('@/assets/images/global/rightPanel.png') no-repeat;
    background-size: 100% 100%;
  }
  .cesiumBox {
    // width: 7680px;
    // height: 2160px;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>
